<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  #box{width: 660px;background: #fff;margin: 10px auto;padding: 5px;}
  h4{color: #636B52;border-bottom: 2px solid #636B52}
  #box-1{width: 100%;height: 280px;overflow: hidden;position: relative;background: url(image/bg1.png);}
  .commer{width: 160px;height: 280px;border-right: 1px solid #ccc;padding: 2px;position: absolute;background: #fff}
  .commer input{width: 123px;height:22px;background: #ddd;border: none;outline: none;}
  .commer button{width: 32px;height: 22px;border: none;background: #fff;outline: none;font-weight: bold;font-size: 16px;color: #390808;}
  .commer strong{width: 100%;height:32px;display: inline-block;line-height: 32px;text-align: center;font-size: 14px;color: #A0A0A4;}
  .commer img{width: 140px;height: 135px;margin: 10px}
  .commer span{font-size: 14px;}
  .pat{font-weight: bold;color: #A0A0A4;}
  p{width: 100%;margin-top: 40px;height: 30px;line-height: 30px;background: #DED6E7}
  p strong{display: inline-block;width: 165px;font-size: 14px;text-align: center;float: left}
  ul li{list-style: none;background: #DED6E7;height: 70px;margin-top: 5px;line-height: 70px;position: relative;}
  ul li span{display: inline-block;width: 165px;font-size: 14px;text-align: center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;float: left}
  ul li strong{display: inline-block;width: 165px;font-size: 14px;text-align: center;float: left}
  ul li img{width: 100px;height: 60px;border: 1px solid #000;position: absolute;right: 50px;top: 4px;}
  </style>
  <script type="text/javascript">
    function getstyle(obj,attr){
      return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
    }
    function shake(obj,attr,fn){
      var pos = parseInt(getstyle(obj,attr));
      var abc = pos;
      var arr = [];
      var num = 0;
      var timer = null;
      for (var i = 20; i > 0; i -= 2) {
        arr.push(i,-i);
      };
      arr.push(0);
      clearInterval(obj.shake);
      obj.shake = setInterval(function(){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if(num === arr.length){
          clearInterval(obj.shake);
          fn && fn();
        }
      },50)
    }
    function move(obj,attr,dir,target,fn){
      parseFloat(getstyle(obj,attr)) < target ? dir : -dir;
      clearInterval(obj.timer);
      obj.timer = setInterval(function(){
        var speed = parseFloat(getstyle(obj,attr)) + dir;
        if(speed >= target && dir > 0 || speed < target && dir < 0){
          speed = target;
        }
        obj.style[attr] = speed + 'px';
        if(speed == target){
          clearInterval(obj.timer);
          fn && fn();
        }
      },50)
    }
    window.onload = function(){
      var Box1 = document.getElementById('box-1');
      var commer = Box1.getElementsByClassName('commer');
      var Inp = Box1.getElementsByTagName('input');
      var Btn = Box1.getElementsByTagName('button');
      var Str = Box1.getElementsByTagName('strong');
      var Bri = Box1.getElementsByClassName('bri');
      var Unit = Box1.getElementsByClassName('unit');
      var Ul = document.getElementsByTagName('ul')[0];
      var total = document.getElementById('total');
      var money = 0;
      for (var i = 0; i < commer.length; i++) {
        commer[i].style.left = '' + 165 * i + 'px';
      };
      function countdown(n){
        var Now = null;
        var New = null;
        var str = '';
        var t = 0;
        var timer = null;
        var num = n;
        var num1 = n + 1;
        New = new Date(Inp[n].value);
        clearInterval(timer);
        timer = setInterval(function(){
          Now = new Date();
          t = Math.floor((New - Now) / 1000);
          if(t >= 0){
            str = Math.floor(t / 86400) + '天' + Math.floor(t % 86400 / 3600) + '时' + Math.floor(t % 86400 % 3600 / 60) + '分' + t % 60 + '秒';
            Str[n].innerHTML = str;
          }else{
            clearInterval(timer); 
            shake(commer[num],'left',function(){
              move(commer[num],'top',20,280,function(){
                Ul.innerHTML += "<li><span>" + Bri[num].innerHTML + "</span><strong>" + Unit[num].innerHTML + "</strong>" + "<img src='images/" + num1 + ".jpg'>" + "</li>";
                money += parseFloat(Unit[num].innerHTML);
                total.innerHTML = money;
              })
            });
          }
        },1000)
      }
      for (var i = 0; i < Btn.length; i++){
        Btn[i].index = i;
        Btn[i].onclick = function(){
          countdown(this.index);
        }
      };
    }
  </script>
</head>
<body>
  <div id="box">
    <h4>限购时间</h4>
    <div id="box-1">
      <div class="commer">
        <input type="text" value="April 24,2019 19:11:00">
        <button>确定</button>
        <strong>剩余00天00时00分00秒</strong>
        <img src="images/1.jpg">
        <span class="bri">疯狂599，美的爆款隐藏式面板下拉门微波炉</span><br>
        <span class="pat">抢购价：</span>
        <span style="font-weight:bold;color:#BD214A">￥</span>
        <span class="unit" style="font-weight:bold;color:#BD214A">599.00</span>
      </div>
      <div class="commer">
        <input type="text" value="April 24,2019 19:11:00">
        <button>确定</button>
        <strong>剩余00天00时00分00秒</strong>
        <img src="images/2.jpg">
        <span class="bri">疯狂599，美的爆款隐藏式面板下拉门微波炉</span><br>
        <span class="pat">抢购价：</span>
        <span style="font-weight:bold;color:#BD214A">￥</span>
        <span class="unit" style="font-weight:bold;color:#BD214A">3299.00</span>
      </div>
      <div class="commer">
        <input type="text" value="April 24,2019 19:11:00">
        <button>确定</button>
        <strong>剩余00天00时00分00秒</strong>
        <img src="images/3.jpg">
        <span class="bri">疯狂599，美的爆款隐藏式面板下拉门微波炉</span><br>
        <span class="pat">抢购价：</span>
        <span style="font-weight:bold;color:#BD214A">￥</span>
        <span class="unit" style="font-weight:bold;color:#BD214A">1.00</span>
      </div>
      <div class="commer" style="border:none;">
        <input type="text" value="April 24,2019 19:11:00">
        <button>确定</button>
        <strong>剩余00天00时00分00秒</strong>
        <img src="images/4.jpg">
        <span class="bri">疯狂599，美的爆款隐藏式面板下拉门微波炉</span><br>
        <span class="pat">抢购价：</span>
        <span style="font-weight:bold;color:#BD214A">￥</span>
        <span class="unit" style="font-weight:bold;color:#BD214A">168.00</span>
      </div>
    </div>
    <p>
      <strong style="height:30px;line-height:30px">商品名称</strong>
      <strong style="height:30px;line-height:30px">价格</strong>
    </p>
    <ul>
      
    </ul>
    <strong>总价：<strong id="total" style="color:#ff0000;">0</strong>元</strong>
    
  </div>
</body>
</html>
</body>
</html>